import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { SearchBar, Button, Image } from 'antd-mobile'
import { LeftOutline, InformationCircleOutline } from 'antd-mobile-icons'
import dataService, { type Training } from '../../services/dataService'

const ShapeTraining = () => {
  const navigate = useNavigate()
  // const [searchParams] = useSearchParams()
  // const category = searchParams.get('category') || '塑性训练'
  
  const [searchValue, setSearchValue] = useState('')
  const [trainings, setTrainings] = useState<Training[]>([])
  const [activeFilter, setActiveFilter] = useState('全部训练')

  const filters = ['全部训练', '手臂', '胸部', '腹部']

  useEffect(() => {
    // 获取所有训练数据
    const allTrainings = dataService.getAllTrainings()
    setTrainings(allTrainings)
  }, [])

  const handleTrainingClick = (training: Training) => {
    navigate(`/training-detail?id=${training.id}`)
  }

  const handleFilterClick = (filter: string) => {
    setActiveFilter(filter)
  }

  const filteredTrainings = trainings.filter(training => {
    // 根据搜索词过滤
    if (searchValue.trim()) {
      return training.title.toLowerCase().includes(searchValue.toLowerCase())
    }
    return true
  })

  return (
    <div className="shape-training-page">
      {/* 头部 */}
      <div className="header">
        <div className="nav-header">
          <button className="back-btn" onClick={() => navigate(-1)}>
            <LeftOutline />
          </button>
          <div className="title">塑性训练</div>
          <div style={{ width: 24 }} />
        </div>
        
        <div className="search-section">
          <SearchBar
            placeholder="这里输入内容搜索"
            value={searchValue}
            onChange={setSearchValue}
            style={{ 
              '--background': '#f5f5f5',
              '--border-radius': '20px'
            }}
          />
        </div>

        {/* 筛选标签 */}
        <div className="filters">
          {filters.map((filter) => (
            <Button
              key={filter}
              size="small"
              fill={activeFilter === filter ? 'solid' : 'outline'}
              color={activeFilter === filter ? 'warning' : 'default'}
              onClick={() => handleFilterClick(filter)}
              style={{ 
                borderRadius: '20px',
                margin: '0 4px',
                fontSize: '14px',
                padding: '4px 16px'
              }}
            >
              {filter}
            </Button>
          ))}
        </div>
      </div>

      <div className="content">
        <div className="trainings-list">
          {filteredTrainings.map((training) => (
            <div 
              key={training.id}
              className="training-item"
              onClick={() => handleTrainingClick(training)}
            >
              <Image
                src={training.cover}
                alt={training.title}
                width={60}
                height={60}
                fit="cover"
                style={{ borderRadius: '12px' }}
              />
              <div className="training-info">
                <div className="training-title">{training.title}</div>
                <div className="training-duration">{training.duration}</div>
              </div>
              <button 
                className="info-button"
                onClick={(e) => {
                  e.stopPropagation()
                  // 这里可以显示训练详细信息
                  console.log('查看训练详情:', training.title)
                }}
              >
                <InformationCircleOutline />
              </button>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .shape-training-page {
          min-height: 100vh;
          background: #ffffff;
        }
        
        .header {
          background: #ffffff;
          padding: 20px 16px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        
        .nav-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
          padding-top: 24px;
        }
        
        .back-btn {
          background: none;
          border: none;
          font-size: 22px;
          color: #333333;
          cursor: pointer;
          padding: 8px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease;
        }
        
        .back-btn:hover {
          background: #f8f9fa;
          transform: scale(1.05);
        }
        
        .title {
          font-size: 20px;
          font-weight: 700;
          color: #333333;
          letter-spacing: -0.3px;
        }
        
        .search-section {
          margin: 16px 0 20px 0;
        }
        
        .filters {
          display: flex;
          gap: 12px;
          overflow-x: auto;
          padding-bottom: 4px;
          scrollbar-width: none;
          -ms-overflow-style: none;
        }
        
        .filters::-webkit-scrollbar {
          display: none;
        }
        
        /* 重写按钮样式 */
        .filters .adm-button {
          border-radius: 20px;
          font-weight: 500;
          font-size: 14px;
          padding: 8px 20px;
          height: auto;
          min-width: auto;
          white-space: nowrap;
          transition: all 0.3s ease;
        }
        
        .filters .adm-button[fill="solid"] {
          background: #FF6B35 !important;
          border-color: #FF6B35 !important;
          color: #ffffff !important;
          box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
        }
        
        .filters .adm-button[fill="outline"] {
          background: #ffffff !important;
          border-color: #e0e0e0 !important;
          color: #666666 !important;
        }
        
        .filters .adm-button:hover {
          transform: translateY(-1px);
        }
        
        .content {
          padding: 24px 16px;
          background: #ffffff;
        }
        
        .trainings-list {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }
        
        .training-item {
          background: #ffffff;
          border-radius: 20px;
          padding: 16px;
          display: flex;
          align-items: center;
          gap: 16px;
          cursor: pointer;
          transition: all 0.3s ease;
          box-shadow: 0 2px 12px rgba(0,0,0,0.06);
          border: 1px solid #f0f0f0;
        }
        
        .training-item:hover {
          transform: translateY(-1px);
          box-shadow: 0 4px 20px rgba(0,0,0,0.1);
          border-color: rgba(255, 107, 53, 0.2);
        }
        
        .training-item:active {
          transform: scale(0.98);
        }
        
        .training-item img {
          width: 64px;
          height: 64px;
          border-radius: 16px;
          object-fit: cover;
          flex-shrink: 0;
        }
        
        .training-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 6px;
        }
        
        .training-title {
          font-size: 15px;
          font-weight: 600;
          color: #333333;
          line-height: 1.4;
        }
        
        .training-duration {
          font-size: 13px;
          color: #999999;
          font-weight: 500;
        }
        
        .info-button {
          width: 44px;
          height: 44px;
          border-radius: 50%;
          background: #f8f9fa;
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #666666;
          cursor: pointer;
          transition: all 0.3s ease;
          flex-shrink: 0;
        }
        
        .info-button:hover {
          background: #e9ecef;
          color: #FF6B35;
          transform: scale(1.05);
        }
        
        .info-button:active {
          transform: scale(0.95);
        }
      `}</style>
    </div>
  )
}

export default ShapeTraining